import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { protoActions } from 'reduxs'
import { getDataSource, getFlagValue, showTeam, getTeamFlag, getPageFlag } from 'services/utils'
import DescriptionList from 'ant-design-pro/lib/DescriptionList'
import QueryTable from '../components/query-table'
import _ from 'lodash'

const accessFlag = getPageFlag('/proto-tool/user-exchange', 'access')
const { Description } = DescriptionList

@connect(
  state => ({
    parser              : state.Proto.parser
  }),
  dispatch => ({
    actions: bindActionCreators({ 
      ...protoActions
    }, dispatch)
  })
)
export default class UserExchange extends PureComponent {

  render () {
    const { location, parser } = this.props
    let statusParser = null
    let itemParser = null
    if (_.has(parser, 'USER_EXCHANGE_STATUS')) {
      statusParser = parser['USER_EXCHANGE_STATUS']
    }
    if (_.has(parser, 'USER_EXCHANGE_ID')) {
      itemParser = parser['USER_EXCHANGE_ID']
    }
    let options = {
      layoutOptions: {
        location,
        pageCode: accessFlag.value,
        breadcrumb: [
          { name: '主页', link: '/' },
          { name: '运营工具类' },
          { name: '兑换信息查询' }
        ],
      },
      searchOptions: {
        begin_end: {
          format: 'YYYY-MM-DD',
          required: { required: true, message: `请选择时间点!` }
        },
        roleId: {
          name: '玩家ID',
        }
      },
      proto: 'user-exchange',
      tableColumns: [
        {
          key: '1',
          title: '兑换时间',
          dataIndex: 'data_0',
          width: 200
        },
        {
          key: '2',
          title: '兑换ID',
          dataIndex: 'item',
          render: (item) => itemParser[parseInt(item)] || item,
          width: 200
        },
        {
          key: '3',
          title: '订单号',
          dataIndex: 'data_2',
        },
        {
          key: '4',
          title: '玩家ID',
          dataIndex: 'data_3',
          width: 100
        },
        {
          key: '5',
          title: '手机号',
          dataIndex: 'data_4',
          width: 150
        },
        {
          key: '6',
          title: '状态',
          dataIndex: 'status',
          render: (status) => statusParser[status] || status,
          width: 100
        }
      ],
      tableScroll: { },
      tablePagination: true,
      remark: [
        (
          <DescriptionList size="large" title="备注" layout="vertical" style={{ width: '100%' }}>
            <Description term="ID 商品" style={{ fontFamily: 'Comic Sans MS' }}>
              40001 - 5元话费<br />
              40002 - 30元话费<br />
              40003 - 100元话费<br />
              40004 - 100元京东卡<br />
              40005 - 500元京东卡<br />
              40006 - 小米移动电源<br />
              40009 - iPhoneX<br />
            </Description>
            <Description term="兑换状态" style={{ fontFamily: 'Comic Sans MS' }}>
              &nbsp;0  - 发放中<br />
              &nbsp;1  - 发放成功<br />
              -1 - 失败<br />
            </Description>
          </DescriptionList>
        ),
      ]

    }
    return (
      <QueryTable  {...options} />
    )
  }
}